import React, { useRef } from 'react'
import ClassTest from './components/ClassTest'
import FunTest from './components/FunTest';
/**
 * 1. ref 获取真实dom元素
 * 2. 利用ref 单独模拟 componentDidUpdate
 * 3. ref还可以给组件绑定：
 *    3-1. 类组件: 可以获取到类组件的实例对象
 *    3-2. 函数组件: 本身不能够直接绑定ref属性，但是通过React.forwardRef()可以绑定
 *           作用：可以在父组件中操作子组件的真实dom元素
 *           步骤：1. 在父组件给子组件绑定ref属性
 *                 2. 在函数子组件通过第二个形参接收，该参数就是父组件传递过来的ref对象
 *                 3. 接收到ref对象绑定子组件的dom元素
 *       
 */
export default function App() {
    let classRef = useRef();
    let funRef = useRef(true);
    return (
        <div>
            <h3>类组件绑定ref</h3>
            <ClassTest ref={classRef}/>
            <FunTest ref={funRef} count={10}/>

            <h3>函数组件绑定ref</h3>
            <button onClick={()=>{
                console.log('classRef: ', classRef)
                console.log('funRef: ', funRef);
                // funRef.current.style.border = '1px solid red';
                // funRef.current.style.color = 'green';
                funRef.current.changeBorder();
                funRef.current.changeColor();
            }}>获取ref</button>
        </div>
    )
}
